<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 17:15:11
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-12 09:54:14
 * @FilePath: \ekee-web\src\views\end\account-setting\AccountSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="enterprise-center relative h100">
    <div class="container overflow-y">
      <EnterpriseCenterTitle :titleList="titleList"></EnterpriseCenterTitle>
      <div class="mt4 px4"></div>
  
      <div v-if="screenDating.length > 0">
        <div
          class="content_text"
          v-for="(item, index) in screenDating"
          :key="index"
        >
          <div
            style="
              height: 46px;
              background: #f5f5f5;
              border-radius: 8px 8px 8px 8px;
              opacity: 1;
              line-height: 46px;
              padding-left: 16px;
              font-size: 16px;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: rgba(0, 0, 0, 0.87);
              margin-bottom: 16px;
            "
          >
            {{ item.date }}
          </div>
          <div
            style="
              display: flex;
              padding-bottom: 10px;
              margin-bottom: 10px;
              border-bottom: 1px solid #e6e6e6;
            "
            v-for="(gitem, gindex) in item.list"
            :key="gindex"
          >
            <div class="content_text_img">
              <img :src="gitem.image" alt="" />
            </div>
            <div class="content_text_tittle">
              <div class="biaoti">{{ gitem.name }}</div>
              <div class="biaoti">{{ gitem.category }}</div>
              <div class="biaoti">来源企业：{{ gitem.company }}</div>
            </div>
            <div class="content_text_info">
              <div class="biaoti">单价：{{ gitem.min_price }}</div>
              <!-- <div class="biaoti">规格：{{ gitem.guige }}</div> -->
            </div>
            <div class="content_text_fh">
              <div class="biaoti ellipsis-2">
                发货地：{{ gitem.province }}{{ gitem.city }}{{ gitem.county }}
              </div>
              <div class="biaoti">上架日期：{{ /\d{4}-\d{1,2}-\d{1,2}/g.exec(gitem.online_time)[0] }}</div>
            </div>
            <div class="content_text_ck">
              <el-button
                style="
                  color: #fff;
                  width: 80px;
                  background: #f0ae3c;
                  border-radius: 8px 8px 8px 8px;
                  height: 42px;
                "
                @click="CancelFavorite(gitem.goods_id)"
                >取消收藏</el-button
              >
              <el-button
                style="
                  color: #fff;
                  width: 80px;
                  background: linear-gradient(
                    270deg,
                    rgb(67, 122, 239) 0%,
                    rgb(7, 174, 239) 100%
                  );
                  border-radius: 8px;
  
                  height: 42px;
                "
                @click="onDetail(gitem.goods_id, gitem.tittle)"
                >查看详情</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <Empty v-else></Empty>
    </div>
    <!-- 分页 -->
    <TablePagination v-if="totalList > 0" :totalList="totalList" :page="collectionList.page" @handleCurrentChange="handleCurrentChange"></TablePagination>
  </div>
</template>


<script setup>
import { onMounted, ref } from "vue";
import EnterpriseCenterTitle from "@/components/EnterpriseCenterTitle.vue";
import TablePagination from "@/components/TablePagination.vue";
import Empty from "@/components/Empty.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { CollectionList, CollectionDelete } from "@/api/barterhall";

const router = useRouter();
const titleList = ref([
  {
    name: "收藏商品",
    value: "",
  },
]);
onMounted(() => {
  getCollectionList();
});

const collectionList = ref({
  page: 1,
  page_size: 10,
});

// const newDate= ref(/\d{4}-\d{1,2}-\d{1,2}/g.exec())
const getCollectionList = () => {
  CollectionList(collectionList.value)
    .then((res) => {
      if (res.code == 1) {
        console.log("res", res.data.data);
        screenDating.value = res.data.data;
        totalList.value=res.data.total
      }
    })
    .catch((err) => {});
};
const CancelFavorite = (id) => {
  CollectionDelete({ goods_id: id }).then((res) => {
    if (res.code == 1) {
      ElMessage({ message: res.msg, type: "success" });
      getCollectionList();
    } else {
      ElMessage({ message: res.msg, type: "error" });
    }
  });
};
const onDetail = (id, tittle) => {
  router.push({
    path: "/barter-hall-detail",
    query: {
      id: id,
      tittle: tittle,
    },
  });
};

const screenDating = ref([]);

// 数据总条数
const totalList = ref(0);
const handleCurrentChange = (val) => {
  collectionList.value.page = val;
  getCollectionList();
};
</script>

<style lang="less" scoped>
.enterprise-center {
  color: #888;
  .container {
    height: calc(100vh - 204px);
  }
}
.ellipsis-1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.content_text {
  background-color: #fff;
  border-radius: 0px 0px 0px 0px;
  margin: 5px 16px;
  display: flex;
  flex-direction: column;
  padding: 0 0 16px 0;
  .content_text_img {
    width: 126px;
    height: 98px;
    border-radius: 10px 10px 10px 10px;
    img {
      height: 100%;
      width: 100%;
      border-radius: 10px 10px 10px 10px;
    }
    opacity: 1;
  }
  .content_text_tittle {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;

    margin-left: 16px;
    width: 24%;
    .biaoti {
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #212121;
      height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  .content_text_info {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    margin-left: 16px;
    width: 15%;
    .biaoti {
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #212121;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  .content_text_fh {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    margin-left: 16px;
    width: 24%;
    .biaoti {
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #212121;

      // height:88px;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-line-clamp: 4;
      // -webkit-box-orient: vertical;
    }
  }
  .content_text_ck {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
  }
}
</style>
